<template>
  <div>
    <card class="card">
      <el-form v-model="form"  label-width="80px" size="small">
        <el-upload
            class="avatar-uploader"
            action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
        >
          <img v-if="imageUrl" :src="imageUrl" class="avatar" />
          <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
        </el-upload>
        <el-form-item label="用户名" style="margin-left: 200px; margin-top: -150px">
          <el-input v-model="form.username" disabled autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="昵称" style="margin-left: 200px">
          <el-input v-model="form.nickname" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
        <el-form-item label="密码" style="margin-left: 200px">
          <el-input v-model="form.password" autocomplete="off" style="width: 400px"></el-input>
        </el-form-item>
<!--        <el-form-item>-->
<!--          <el-button type="primary" @click="save">保 存</el-button>-->
<!--          &lt;!&ndash;          <el-button type="primary" @click="sign"><i class="el-icon-location" />定位</el-button>&ndash;&gt;-->
<!--          <el-button type="primary" @click="return1">返回主页</el-button>-->
<!--        </el-form-item>-->
      </el-form>
      <el-button type="primary" @click="save()">保 存</el-button>
      <el-button type="primary" @click="return1()">返回主页</el-button>
    </card>
  </div>
</template>


<script lang="ts" setup>
import {onMounted, ref} from "vue";
import axios from "@/utils/axios";
import qs from "qs";
import { ElMessage } from 'element-plus'
import { Plus } from '@element-plus/icons-vue'
import type { UploadProps } from 'element-plus'
import router from "@/router";

const us = ref({
  username:sessionStorage.getItem("id")
})
// var username = sessionStorage.getItem("username");
const form = ref({
  username:"",
  nickname:"",
  password:"",
})
const imageUrl = ref('')

const handleAvatarSuccess: UploadProps['onSuccess'] = (
    response,
    uploadFile
) => {
  imageUrl.value = URL.createObjectURL(uploadFile.raw!)
}

const beforeAvatarUpload: UploadProps['beforeUpload'] = (rawFile) => {
  if (rawFile.type !== 'image/jpeg') {
    ElMessage.error('需要时jpg格式的图片哦!')
    return false
  } else if (rawFile.size / 1024 / 1024 > 2) {
    ElMessage.error('图片不能大于2MB!')
    return false
  }
  return true
}
onMounted(() => {

  axios.post(
      "/nick",
      qs.stringify(us.value)
  )
      .then(res => {
        form.value.nickname = res
      })
      .catch(err => {
        console.log(err);
      })
  axios.post(
      "/username",
      qs.stringify(us.value)
  )
      .then(res => {
        form.value.username = res
      })
      .catch(err => {
        console.log(err);
      })
  axios.post(
      "/password",
      qs.stringify(us.value)
  )
      .then(res => {
        form.value.password = res
      })
      .catch(err => {
        console.log(err);
      })
});
function save(){
  axios.post(
      "/up",
      qs.stringify(form.value)
  )
      .then(res => {
        ElMessage({
          message: '修改成功',
          type: 'success',
        })
      })
      .catch(err => {
        console.log(err);
        ElMessage.error('修改失败')
      })
}
function return1(){
  router.push({path: '/sy'})
}
</script>

<style>
.avatar-uploader {
  text-align: left;
  padding-bottom: 10px;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  color: #8c939d;
  width: 138px;
  height: 138px;
  line-height: 138px;
  text-align: center;
}
.avatar {
  width: 160px;
  height: 160px;
  display: block;
}
.card{
  width: 850px;
  height: 300px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  background: lightgrey;
  border-radius: 2% 65% 10% 90% / 81% 10% 87% 15%;
  background: #12c2e9;
  background: -webkit-linear-gradient(to right, #EDC6B1, #B7B7B7, #7C96AB);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to right, #EDC6B1, #B7B7B7, #7C96AB);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  box-shadow: -20px -20px 1500px #BFCCB5;
}
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
